<!--
 * @Description: 图标选择
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-12-24 10:51:13
 * @LastEditTime: 2025-07-26 23:04:59
-->
<template>
  <el-popover
    :visible="visible"
    popper-class="icon-select"
    placement="bottom-start"
    :width="220"
    @show="show"
  >
    <template #reference>
      <el-input
        class="icon-select-input"
        v-model="icon"
        readonly
        placeholder="请选择图标"
        @click="visible = !visible"
      >
        <template v-if="icon" #suffix>
          <fy-icon
            @click="visible = !visible"
            :name="icon"
            color="var(--el-select-input-color)"
            size="14"
            style="cursor: pointer"
          />
        </template>
      </el-input>
    </template>
    <el-input
      class="search-input"
      v-model="fuzzySearchWord"
      clearable
      placeholder="搜索..."
    />
    <div class="icon-box">
      <div
        class="icon-item"
        v-for="item in fuzzySearch(fyIcons, fuzzySearchWord)"
        :key="item"
        :title="item"
        @click="bindIconCheck(item)"
      >
        <fy-icon :name="item" size="20" />
      </div>
    </div>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { fuzzySearch, clickOtherPosToClose } from "../../helpers";
import { useCurrentInstance } from "../../helpers/hooks";

// 组件名称（必要）
defineOptions({ name: "FyIconSelect" });

const icon = defineModel<string>();

// 弹窗显隐
const visible = ref(false);

// 获取缓存的图标列表
const { proxy } = useCurrentInstance();
const fyIcons = proxy.$getIcons();

// 点选
const bindIconCheck = (iconName: string) => {
  icon.value = iconName;
};

// 模糊搜索
const fuzzySearchWord = ref("");

// 显隐事件
const show = () => {
  const inputEl = document.querySelector(".icon-select-input");
  const popEl = document.querySelector(".el-popover.icon-select");
  clickOtherPosToClose([inputEl as HTMLElement, popEl as HTMLElement], () => {
    visible.value = false;
  });
};
</script>

<style scoped lang="scss">
@use "../../styles/mixin.scss" as *;

.icon-box {
  height: 114px;
  overflow: auto;
  @include scrollBar;

  .icon-item {
    display: inline-block;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background: var(--el-color-primary-light-9);
    }
  }
}

:global(.el-popover.icon-select) {
  padding: 10px 8px 10px 10px;
}

:global(.el-popover.icon-select .search-input) {
  width: calc(100% - 2px);
  margin-bottom: 5px;
}

.icon-select-input:deep(.el-input__inner) {
  cursor: pointer;
}
</style>
